<template>
    <div class="default-table-detail-container">
        <BaseTableInfo v-model="baseTableInfoModel" />
    </div>
</template>

<script lang="ts" setup>

    import ConsoleRoleApi from '/@/api/console/ConsoleRoleApi.ts';

    const props = defineProps({
        modelValue: {

        }
    })
    const route = useRouter()

    const baseTableInfoModel = ref({
        columnCount: 3,
        autoFit: false,
        columnWidth: '300px',
        labelWidth: '100px',
        title: '基本信息',
        modelData: {},
        items: [   //渲染样式区域  通过key ===model 中的值
                {
                label: "主键",
                field: "id",
                },
                {
                label: "角色",
                field: "name",
                },
                {
                label: "排序",
                field: "sort",
                },
                {
                label: "描述",
                field: "description",
                },
                {
                label: "",
                field: "create_time",
                },
                                {
                label: "",
                field: "update_time",
                }        ],
        buttons: [   //标题操作区域
           // {
             //   name: "更多",
              //  buttonClass: 'danger',
               // width: 100,
               // click: (any: object) => {   //暴露的方法钩子
                 // $baseMessage("这里执行业务", 'success', 'vab-hey-message-success');
                //},
            //},


        ]
    })

    onMounted(async () => {
         //初始化数据model
        const { data } = await ConsoleRoleApi.getDetail({
          companyRoleId: props.modelValue.query.consoleRoleId   //从路由中获取参数
        })
        baseTableInfoModel.value.modelData = data;





    })
</script>

<style lang="scss" scoped>
    .default-table-detail-container {
        :deep() {
            .el-form--inline {
                .el-form-item {
                    margin-right: 10px;
                }
            }

            .el-descriptions__label {
                min-width: 80px !important;
                text-align: right;
            }
        }
    }
</style>
